<template>
  <div class="container">
    <div class="logo"></div>
    <van-form @submit="onSubmit">
      <van-field
        class="input"
        v-model="phone"
        size="large"
        name="phone"
        placeholder="手机号"
        :rules="[{ required: true }]"
      />
      <van-field
        class="input"
        size="large"
        v-model="password"
        :type="passShow ? 'text' : 'password'"
        name="password"
        placeholder="请输入密码"
        :right-icon="passShow ? 'eye-o' : 'closed-eye'"
        @click-right-icon="passShow = !passShow"
        :rules="[
          { required: true },
          { pattern: $reg.pwd, message: '请输入正确密码' },
        ]"
      />
      <div style="margin: 16px">
        <van-button
          class="button"
          round
          block
          type="danger"
          native-type="submit"
          @click="login"
          :disabled="!loginBtnUse"
          >登录</van-button
        >
      </div>
    </van-form>
    <p class="registerlink">
      <router-link :to="{ name: 'register' }">注册账号</router-link>
    </p>
    <p class="forgotPass registerlink">忘记密码</p>
    <p class="forgotPass registerlink" @click="$router.push('home')">
      返回首页
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      passShow: false,
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      this.$router.push({ name: "home" });
    },
    login() {
      this.$router.push({ name: "home" });
    },
  },
  computed: {
    loginBtnUse: function () {
      return (
        this.$reg.phone.test(this.phone) && this.$reg.pwd.test(this.password)
      );
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.container {
  background: url("https://m.imooc.com/static/wap/static/img/account/bg.png")
    no-repeat top center;
  background-size: 100% auto;
  padding: 0.85333333rem;
  padding-top: 2.29333333rem;
  font-size: 0.37333333rem;
  position: relative;
  background-color: #fff;
}
.logo {
  position: absolute;
  left: 50%;
  top: 0.74666667rem;
  margin-left: -0.53333333rem;
  width: 1.06666667rem;
  height: 1.06666667rem;
  background: url("https://m.imooc.com/static/wap/static/img/account/logo.png")
    no-repeat top center;
  background-size: 100%;
}
.input {
  width: 100%;
  font-size: 16px;
  height: 56px;
  margin-top: 20px;
}
.van-cell::after {
  border-bottom: 2px solid #c4c4c4;
}
.button {
  height: 56px;
  font-size: 18px;
  width: 100%;
  margin-top: 30px;
}
.registerlink {
  padding: 16px 0 24px;
  font-size: 16px;
  text-align: center;
  line-height: 0.85333333rem;
  color: #f20d0d;
}
.forgotPass {
  color: #5e5e5e;
  padding-top: 0;
}
.van-field__right-icon > .van-icon {
  font-size: 30px;
}
</style> 